<template>
  <div class="countList">
    <el-row>
      <el-col :span="14">
        <div>项目名称(默认全部):</div>
        <div>
          图形：
          <el-radio-group v-model="radio">
            <el-radio :label="1">柱状图</el-radio>
            <el-radio :label="2">折线图</el-radio>
            <el-radio :label="3">饼状图</el-radio>
            <el-radio :label="4">堆叠柱状图</el-radio>
            <el-radio :label="5">堆叠区域图</el-radio>
          </el-radio-group>
        </div>
        <div>
          X轴：
          <el-radio-group v-model="radio">
            <el-radio :label="1">构建类型</el-radio>
            <el-radio :label="2">构件状态</el-radio>
            <el-radio :label="3">加工厂</el-radio>
            <el-radio :label="4">时间段</el-radio>
            <el-radio :label="5">检查结果</el-radio>
          </el-radio-group>
        </div>
        <div>
          Y轴：
        </div>
      </el-col>
      <el-col :span="10"
              align="right">
        <el-button type="primary">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="myChart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '',
    }
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['加工制作', '工厂堆放', '道路运输', '现场堆放', '现场安装', '安装完成']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['钢桁架', '预制女儿墙', '预制外墙', '预制飘窗', '桩', '梁', '基础地梁', '电梯井', '箱型钢梁', '外框']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '加工制作',
            type: 'bar',
            stack: '广告',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '工厂堆放',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '道路运输',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '现场堆放',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '现场安装',
            type: 'bar',
            stack: '广告',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          },
          {
            name: '安装完成',
            type: 'bar',
            barWidth: 25,
            stack: '广告',
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
        ]
      });
    }
  },
  mounted () {
    this.drawLine();
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    myChart._dom.children[0].style.width = '100%'
    myChart._dom.children[0].children[0].style.width = '100%'
  }
}
</script>

<style lang="scss" scoped>
#myChart {
  width: 100%;
  height: 400px;
}
</style>
